정적 사이트 생성기

#Frontend

우리가 Next.js 를 많이 사용하다보면 SSG(Static-Stie-Generation)이라는 단어를 듣게된다
이는 페이지 요청이 들어오면 동적으로 페이지를 생성해서 건네주는것이 아닌 미리 빌드되어있는 정적인 페이지를 생성하여 전달해주는 도구를 의미하는데

SSG를 사용하게되면 좋은점

  1. SEO 빌드되어있는 HTML엔 내용이 꽉 차있기때문에 크롤러가 쉽게 정보를 가져가서 높은 점수를 받을수있다
  2. 속도 브라우저가 처리 하지않고 미리 빌드되어있는 HTML을 전달하기 때문에 빠르다
  3. 정적 파일이기 때문에 오랫동안 캐싱되어 반복적인 서버 요청을 줄일 수 있습니다

대표적인 정적 사이트 생성기 종류

  1. Next.js
  2. Gatsby
  3. Eleventy

Eleventy를 활용하여 만든 digital garden이라는 도구를 사용해봤었는데 이때 탬플릿 엔진인 Nunjucks를 결합하여 Eleventy로 마크다운에서 프론트매터와 글내용을 가지고 Nunjucks에 연결하여 탬플릿 대로 만든후 결합하여 정적 사이트로 만드는 과정을 거쳐 웹페이지를 구성하는 코드를 본적이있다.